<template>
  <div class="login-page">
    <img class="logo-img" src="@/assets/logo_img.png" />
    <van-field
      v-model="loginName"
      class="login-field"
      type="text"
      label="账号"
      placeholder="请输入用户名"
      icon="clear"
      @click-icon="clearMobile"
      required
    />
    <van-field
      v-model="password"
      class="login-field"
      type="password"
      label="密码"
      placeholder="请输入密码"
      icon="clear"
      @click-icon="clearPsw"
      required
    />
    <p class="login-radio-group">
      <input
        type="checkbox"
        name="vehicle"
        value="Car"
        v-model="checkRadio"
        checked="checked"
        @change="clickRadio(checkRadio)"
      />记住密码
    </p>
    <van-button class="login-btn" size="large" type="info" @click="login"
      >登录</van-button
    >
  </div>
</template>

<script>
import { Button, Field, Toast } from 'vant';
import api from '@/api';
const { user } = api;

export default {
  components: {
    [Button.name]: Button,
    [Field.name]: Field,
    [Toast.name]: Toast,
  },

  data() {
    return {
      loginName: '',
      password: '',
      checkRadio: true,
    };
  },

  methods: {
    clearMobile() {
      this.loginName = '';
    },
    clearPsw() {
      this.password = '';
    },
    login() {
      if (!this.validate()) return;
      user
        .signIn({
          username: this.loginName,
          password: this.password.trim(),
        })
        .then((res) => {
          res.code === 200 ? this.handleSuccess(res) : this.handleFail(res);
        });
    },
    clickRadio(data) {
      // console.log(data);
    },
    goRegister() {
      this.$router.push('/register');
    },
    validate() {
      const mobileReg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
      if (!this.loginName) {
        this.showToast('fail', '请输入用户名');
        return false;
      }
      if (!this.password) {
        this.showToast('fail', '请输入密码');
        return false;
      }
      // if (!mobileReg.test(this.mobile)) {
      //   this.showToast('fail', '手机号格式不正确');
      //   return false;
      // }
      return true;
    },
    handleSuccess(res) {
      console.log(22222,res);
      this.State.isLogin = true;
      this.State.token = res.token;
      sessionStorage.setItem('token', res.token);
      // console.log(res);
      this.$router.push('/home');
    },
    handleFail(res) {
      this.showToast('fail', res.msg);
    },
    showToast(type, msg) {
      Toast[type]({
        duration: 1500,
        message: msg,
      });
    },
  },
};
</script>

<style>
.login-page {
  padding: 30px;
  box-sizing: border-box;
  width: 100%;
  /* background-image: url('../assets/login_background.jpg');
  background-size:100% 100% ; */
}
.logo-img {
  display: block;
  margin: 0 auto;
  margin-top: 100px;
}
.login-radio-group {
  font-size: 14px;
  margin-bottom: 15px;
}
.login-field {
  margin-bottom: 15px;
  border: 1px solid #f44;
  border-radius: 4px;
}
.login-btn {
  display: block;
  margin-bottom: 15px;
  /* background-color: #f44; */
  background-color: #1989fa;
  color: #fff;
  border: none;
}
</style>